<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ include file="../../../../header.jsp"%>

<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="misapplication-tap-highlight" content="no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
</head>
<body>
	<div class="mod-toolbar-top cf">
		<div align="center" style="margin-top: 10px;">
			<div align="center">
				<a href="javascript:void(0);" class="ui-btn ui-btn-sp" id="btn-search">未审核</a>
				<span>--</span>
				<a href="javascript:void(0);" class="ui-btn ui-btn-search" id="btn-add">已审核</a>
			</div>
			<div align="center" style="margin-top: 10px;">
				<select style="width: 270px; height: auto;" class="ui-input"
					name="qingJiaTypeId" id="qingJiaTypeId">
					<option value="">选择要查找的人员</option>
					<s:forEach items="${User}" var="User">
						<option value="${User.id }">${User.username }</option>
					</s:forEach>
				</select>
			</div>
			<input value="" placeholder="请假起始时间" class="ui-input"
				readonly="readonly" name="startTime" id="startTime"
				style="width: 134px; height: auto;" type="text">-<input
				value="" placeholder="请假结束时间" readonly="readonly" class="ui-input"
				style="width: 134px; height: auto;" name="endTime" id="endTime"
				type="text">
		</div>
		<div align="center" style="margin-top: 2px;">
			<a class="ui-btn" id="search">查询</a>
		</div>

	</div>
	<div class="grid-wrap" align="left" style="margin-left: 10px;">
		<table id="grid1"></table>
		<div id="pager2"></div>
	</div>

	<img src="" width=250 height=250 class="imgView" style="display: none;">

	<script type="text/javascript">
		var isCheck = false;
		function update() {
			alert("update");
			$.ajax({
				url : "update",
				dataType : "json",
				success : function(data) {

				},
				erro : function() {
					alert("爆炸了！");
				}

			});
		}
		function deletes() {
			alert("update");
			$.ajax({
				url : "permission/edit",
				dataType : "json",
				success : function(data) {

				},
				erro : function() {
					alert("爆炸了！");
				}
			});
		}
		function clearGrid() {
			$("#grid").jqGrid('clearGridData');
		}
		//添加图标
		function operationFormat(cellValue, options, rowObject) {

			if (!isEmpty(rowObject.checkerId) && rowObject.checkerId != 0) {
				return '<div class="operating" data-id="' + options.rowId + 
				'"><span class="ui-icon ui-icon-pencil" title="查看" data-toggle="modal" data-target="#myModal"></span>&nbsp&nbsp'
						+ '<span class="ui-icon ui-icon-minusthick" title="弃审"></span>';

			}

			return '<div class="operating" data-id="' + options.rowId + 
				'"><span class="ui-icon ui-icon-pencil" title="查看" data-toggle="modal" data-target="#myModal"></span>&nbsp&nbsp'
					+ '<span class="ui-icon ui-icon-flag" title="审批"></span>';
		}

		function isEmpty(val) {
			if (undefined == val || val == "" || val == null || val == "null") {
				return true;
			}
			return false;
		}

		function formatDate(value, format, time) {
			if ((value + "").indexOf(",") != -1) {
				value = $.replaceTemplate(value + "", ",", "/");
			}
			var date = new Date(value);

			var paddNum = function(num) {
				num += "";
				return num.replace(/^(\d)$/, "0$1");
			}

			if (isEmpty(format) || format == "1" || format == 'null') {
				format = 'yyyy-MM-dd';
			} else if (format == "2") {
				format = 'yyyy/MM/dd';
			} else if (format == "3") {
				format = 'dd-MM-yyyy';
			} else if (format == "4") {
				format = 'dd/MM/yyyy';
			}
			if (!isEmpty(time)) {
				format += ' hh:mm:ss';
			}
			//指定格式字符
			var cfg = {
				yyyy : date.getFullYear() //年 : 4位
				,
				yy : date.getFullYear().toString().substring(2)//年 : 2位
				,
				M : date.getMonth() + 1 //月 : 如果1位的时候不补0
				,
				MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0
				,
				d : date.getDate() //日 : 如果1位的时候不补0
				,
				dd : paddNum(date.getDate())//日 : 如果1位的时候补0
				,
				hh : paddNum(date.getHours()) //时
				,
				mm : paddNum(date.getMinutes()) //分
				,
				ss : paddNum(date.getSeconds())
			//秒
			}
			format || (format = "yyyy-MM-dd hh:mm:ss");
			return format.replace(/([a-z])(\1)*/ig, function(m) {
				return cfg[m];
			});
		}
		function timestampToTime(cellValue, options, rowObject) {
			var timestamp = cellValue;
			if (cellValue) {
				timestamp = formatDate(timestamp, '', 'yyyy-MM-dd hh:mm');
				return timestamp;
			}
			return '';
		}

		function pictureFormat(cellValue, options, rowObject) {
			if (!isEmpty(rowObject.picture)) {
				return '<img class="img" width="105" height="55" src="'+ rowObject.picture +'">';
			}
			return '';
		}
		function checkFormat(cellValue, options, rowObject) {
			if (!isEmpty(cellValue) && cellValue != 0) {
				return '审批通过';
			}
			return '待审批';
		}

		$(function() {

			$("#startTime").datepicker();
			$("#endTime").datepicker();

			$("#grid1")
					.jqGrid(
							{
								url : "askleave/listcheck",
								datatype : "json",
								height : 400,
								width : 1155,
								shrinkToFit : true,
								autoScroll : true,
								autowidth : true,
								rownumbers : true,
								rowNum : 8,
								mtype : "POST",
								postData : {
									isCheck : isCheck
								},
								rowList : [ 8, 12, 16 ], //可供用户选择一页显示多少条
								pager : '#pager2', //表格页脚的占位符(一般是div)的id
								sortname : 'id', //初始化的时候排序的字段
								sortorder : "asc", //排序方式,可选desc,asc
								viewrecords : true,
								pgbuttons : true,
								cellsubmit : "clientArray",
								colNames : [ "id", "personId", "qingJiaTypeId",
										"人员名称", "请假类型", "天数", "审批结果" ],
								colModel : [ {
									name : "id",
									index : "id",
									key : true,
									hidden : true,
									sorttype : "int",
									align : "center"
								}, {
									name : "personId",
									index : "personId",
									hidden : true
								}, {
									name : "qingJiaTypeId",
									index : "qingJiaTypeId",
									hidden : true
								}, {
									name : "personName",
									editable : false,
									sorttype : "text",
									align : "center",
								}, {
									name : "qingJiaTypeName",
									editable : false,
									sorttype : "text",
									align : "center",
								}, {
									name : "days",
									align : "center",
									editable : false,
									sorttype : "text",
								}, {
									name : "checkerId",
									align : "center",
									editable : false,
									sorttype : "text",
									formatter : checkFormat
								} ],
								loadComplete : function() {
									loadover();
								},
								gridComplete : function() {
								},
								afterInsertRow : function() {
								},
								onSelectRow : function(rowid) { //点击表格中的某一行，触发事件，获得数据
									window.location.href = "phone/qingJiaInfo?qingjiaId="
											+ rowid;
								},
								beforeEditCell : function(rowid, cellname, v,
										iRow, iCol) {
									lastrow = iRow;
									lastcell = iCol;
								}
							});
			initTableRow();
			initEvent();
			// 很简洁的图片预览功能，优化版
			$(document)
					.on(
							"mouseenter",
							".img",
							function(t) {
								var e = $(this);
								if (e.attr("src") != "" && !e.data("initFloat")) {
									var n = $(".imgView");
											e
													.powerFloat({
														zIndex : 19998888888,
														eventType : "hover",
														target : function() {
															return n
														},
														offsets : {
															x : 0,
															y : 0
														},
														position : "2-1",
														showCall : function(t) {
															if (
																	e
																			.data(
																					"initFloat",
																					true),
																	e
																			.prop("nodeName") == "IMG") {
																var i = e
																		.attr("src");
																n
																		.attr(
																				"src",
																				i)
																		.load(
																				function() {
																					var realWidth = this.width, realHeight = this.height;
																					realWidth >= 250 ? n
																							.attr(
																									"src",
																									i)
																							.css(
																									"width",
																									"250px")
																							.css(
																									"height",
																									"250px")
																							: n
																									.attr(
																											"src",
																											i)
																									.css(
																											"width",
																											"auto")
																									.css(
																											"height",
																											"auto")
																				})
															}
														}
													}), e.trigger("mouseenter");
								}
							});
		})
		//设置每行的高度
		function loadover() {
			var grid = $("#grid1");
			var ids = grid.getDataIDs();
			for (var i = 0; i < ids.length; i++) {
				grid.setRowData(ids[i], false, {
					height : 35
				});
			}
		}
		function initTableRow() {
			for (var i = 1; i <= 4; i++) {
				jQuery("#grid1").jqGrid('addRowData', i, {});
			}
			loadover();
		}
		//添加事件
		function initEvent() {

			$(".ui-btn-search").click(
					function(a) {
						handle.callback({
							"isCheck" : isCheck,
							"sTime" : $("#startTime").val(),
							"eTime" : $("#endTime").val(),
							"personId" : $('#qingJiaTypeId option:selected')
									.attr('value')
						});
					}), $("#btn-add").click(
					function(a) {
						isCheck = true;
						handle.callback({
							"isCheck" : isCheck,
							"sTime" : $("#startTime").val(),
							"eTime" : $("#endTime").val(),
							"personId" : $('#qingJiaTypeId option:selected')
									.attr('value')
						});
					}), $("#btn-search").click(
					function(a) {
						isCheck = false;

						handle.callback({
							"isCheck" : isCheck,
							"sTime" : $("#startTime").val(),
							"eTime" : $("#endTime").val(),
							"personId" : $('#qingJiaTypeId option:selected')
									.attr('value')
						});
					}), $("#grid1").on("click",
					".operating .ui-icon-minusthick", function(a) {
						var rowid = $(this).parent().data("id");
						var rowdata = $("#grid1").jqGrid("getRowData", rowid);
						handle.del(rowid, rowdata, false);
					}), $("#grid1").on("click", ".operating .ui-icon-pencil",
					function(a) {
						var rowid = $(this).parent().data("id");
						var rowdata = $("#grid1").jqGrid("getRowData", rowid);
						handle.operate("view", rowid, rowdata);
					}), $("#grid1").on("click", ".operating .ui-icon-flag",
					function(a) {
						a.preventDefault();
						var rowid = $(this).parent().data("id");
						var rowdata = $("#grid1").jqGrid("getRowData", rowid);
						handle.del(rowid, rowdata, true);
					}), $("#btn-record").click(function(a) {
				$("#grid1").jqGrid().trigger("reloadGrid");
			}), $("#btn-setsession").click(function(a) {
				$.ajax({
					url : encodeURI("user/setsession"),
					type : "POST",
					success : function(data) {
						alert(data);
					}
				});
			}), $("#btn-getsession").click(function(a) {
				$.ajax({
					url : encodeURI("user/getsession"),
					type : "POST",
					success : function(data) {
						alert(data);
					}
				});
			})
		}
		handle = {

			operate : function(oper, rowid, rowdata) {
				var title;
				var data = {};
				if ("add" == oper) {
					title = "新增请假信息";
					data = {
						operate : oper,
						callback : this.callback
					}
				} else {
					title = "查看请假信息";
					data = {
						operate : oper,
						rowdata : rowdata,
						rowid : rowid,
						callback : this.callback
					}
				}
				this.dialog = $.dialog({
					title : title,
					data : data,
					content : "url:askleave/editjsp",
					width : 500,
					height : 400,
					max : false,
					min : false,
					cache : false,
					lock : true
				});
			},

			search : function() {
				var grid = $("#grid1");
				this.dialog = $.dialog({
					title : "搜索",
					data : {
						callback : this.callback,
						grid : grid
					},
					content : "url:permission/searchPermission",
					width : 500,
					height : 400,
					max : false,
					min : false,
					cache : false,
					lock : true
				});
			},

			del : function(rowId, rowdata, isCheck) {
				var re = true;
				$.dialog.confirm(isCheck ? "请确认是否通过审核？" : "请确认是否弃审？",
						function() {
							$.ajax({
								url : "askleave/check",
								type : "POST",
								data : {
									"id" : rowId,
									"isCheck" : isCheck,
									"oper" : "del",
									"type" : rowdata.qingJiaTypeName,
									"days" : rowdata.days,
									"startTime" : rowdata.startTime
								},
								success : function(data) {
									console.log(data);
									if (data.status == 200) {
										$("#grid1").jqGrid().trigger(
												"reloadGrid");
									} else {
										alert(data.message);
										re = false;
									}
								}
							});
							return re;
						});
			},
			callback : function(data) {
				if (data != undefined) {
					$('#grid1').jqGrid('setGridParam', {
						search : true
					});
					$("#grid1").jqGrid("setGridParam", {
						postData : data
					}).jqGrid("setGridParam", {
						page : 1
					}).trigger("reloadGrid");
				} else {
					$("#grid1").jqGrid().trigger("reloadGrid");
				}
			}
		};
	</script>
</body>
</html>